<template>
  <div class="index">
    <!-- 头部导航 -->
    <nav>
      <div class="logo_content"></div>
      <Navbar></Navbar>
    </nav>
    <main>
      <!-- 侧边栏 -->
      <aside>
        <Aside @getNewRoute="getNewRoute"
               :newRoute="newRoute"></Aside>
      </aside>
      <!-- 页面内容 -->
      <section :style="{height:screenHeight}">
        <el-tabs v-model="routerVal"
                 type="card"
                 closable
                 @edit="handleTabsEdit"
                 @tab-click='pushRoute'>
          <el-tab-pane v-for="(item,index) in routerList"
                       :key="index"
                       :label="item.name"
                       :name="item.path"></el-tab-pane>
        </el-tabs>
        <div class="content">
          <transition name="fade"
                      mode="out-in">
            <router-view></router-view>
          </transition>
        </div>
      </section>
    </main>
    <!-- <test/> -->
  </div>
</template>

<script>
// import Test from '@/components/test.vue'
import Navbar from "./components/navbar";
import Aside from "./components/aside";

export default {
  name: "index",
  data () {
    return {
      routerVal: "",
      routerList: [],
      newRoute: "",
      screenHeight:''
    };
  },
  components: {
    // Test,
    Navbar,
    Aside
  },
  created () {
    if (!localStorage.getItem("token")) {
      this.$router.replace("./login");
    }
    if (sessionStorage.getItem('routerList')) {
      this.routerList = JSON.parse(sessionStorage.getItem('routerList'))
    }
    if (sessionStorage.getItem('routerVal')) {
      this.routerVal = sessionStorage.getItem('routerVal')
    }
  },
  mounted () {
    this.screenHeight = (document.documentElement.clientHeight - 83) + 'px'
    window.addEventListener('resize',() => {
      this.screenHeight = (document.documentElement.clientHeight - 83) + 'px'
    })
  },
  methods: {
    // 获取新点击的路由
    getNewRoute (route) {
      let mark = false;
      if (this.routerList.length === 0) {
        this.routerList.push(route);
      } else {
        for (var i in this.routerList) {
          if (this.routerList[i].path === route.path) {
            this.routerVal = route.path;
            return;
          } else {
            mark = true;
          }
        }
        if (mark) {
          this.routerList.push(route);
        }
      }
      this.routerVal = route.path;
      sessionStorage.setItem('routerList', JSON.stringify(this.routerList));
      sessionStorage.setItem('routerVal', this.routerVal);
    },
    // 点击标签页跳转路由
    pushRoute (route) {
      this.pushHandler(route.name);
    },
    pushHandler (route) {
      sessionStorage.setItem('routerVal', route);
      let path = route.split('/');

      let newRoute = {
        route: path.pop(),
        path: path.slice(1, path.length)
      }
      this.newRoute = newRoute;
      this.$router.push(route);
    },
    // 删除标签页时触发
    handleTabsEdit (targetName, action) {
      if (action === "remove") {
        let tabs = this.routerList;
        let activeName = this.routerVal;
        let nextTab;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.path === targetName) {
              nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.path;
              }
            }
          });
        }
        this.routerVal = activeName;
        this.routerList = tabs.filter(tab => tab.path !== targetName);
        sessionStorage.setItem('routerList', JSON.stringify(this.routerList));
        sessionStorage.setItem('routerVal', this.routerVal);
        if (nextTab) {
          this.pushHandler(nextTab.path);
        }else{
          if(this.routerList.length == 0){
            this.$router.push('/')
          }
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.index {
  nav {
    display: flex;
    width: 100%;
    .logo_content {
      min-width: 200px;
      max-width: 200px;
      height: 62px;
      background: rgb(84, 92, 100);
    }
  }
  main {
    width: 100%;
    display: flex;
    aside {
      width: 200px;
    }
    section {
      width: 100%;
      min-width: 800px;
      overflow-y: auto;
      .content {
        padding: 30px 50px;
        overflow-y: auto;
      }
      // @media screen and (min-width: 1800px) {
      //   .content {
      //     height: 700px;
      //   }
      // }
      // @media screen and (max-width: 1800px) {
      //   .content {
      //     height: 650px;
      //   }
      // }
      // @media screen and (max-width: 1400px) {
      //   .content {
      //     height: 500px;
      //   }
      // }
      // @media screen and (max-width: 1200px) {
      //   .content {
      //     height: 400px;
      //   }
      // }
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
